<template>
	<div class="chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		chartData: {
			type: Object,
		},
	},
	data() {
		return {
			chart: null,
		}
	},
	watch: {
		chartData() {
			this.setOptions()
		},
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart()
		})
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		this.chart.dispose()
		this.chart = null
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el)
			this.setOptions()

		},
		setOptions() {
			let dataObj = this.chartData
			let option = {
				color: dataObj.color,
				title: {
					text: dataObj.title,
					left: '2%',
					top: '5%',
					textStyle: {
						color: '#000',
						fontSize: '22px',
						fontWeight: 'bold',
					},
				},
				grid: {
					left: '12%',
					right: '5%',
					bottom: '15%',
					top: '28%',
					containLabel: false,
				},
				dataZoom: [
					{
						type: 'inside',
					},
				],
				legend: {
					top: '5%',
					// left: '25%',
					width: '75%',
					right: '4%',
					itemWidth:12,                               //图例标记的图形宽度
					itemHeight:12,
					icon: "rect"
				},
				tooltip: {
					trigger: 'axis',
					formatter: function (params) {
						// console.log(params)
						let str = '';
						str += params[0]['axisValue'];
						for (let i in params) {
							str += '<br/>';
							str += params[i]['marker'];
							str += params[i]['seriesName'];
							str += '：'
							str += params[i]['data'].toFixed(2);
						}
						return str;
					},
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: dataObj.time,
					axisLabel: {
						formatter: function(value) {
							let timeValue = value.slice(8, 10) + '日' + value.slice(11)
							return timeValue
						},
					},
				},
				yAxis: {
					type: 'value',
					splitNumber: dataObj.echartInterval,
					min: dataObj.min,
					max: dataObj.max,
				},
				series: dataObj.seriesData,
			}
		
			this.chart.setOption(option,true)
		},
	},
}
</script>

<style lang="stylus" scoped>
.chart
    width 100%
    height 100%
</style>
